<template>
  <div style="width: 100%">
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 0px">购物车</h3>
    <el-divider/>
    <div style="font-weight: bold;letter-spacing: 2px;font-size: 25px;color: #8861c9" v-if="cartList.length === 0">
        购物车还是空的哦，快去购票吧！
      <router-link to="/">
        <el-button style="margin: 10px 118px;background-color: #8d64b1;color: #fcefef;transform: translate(-110%, -15%);" type="medium" round>返 回 首 页</el-button>
      </router-link>
    </div>
    <div v-loading="loading">

      <el-card shadow="hover" v-for="(item, index) in cartList" :key="index" class="box-card">
        <div>
          <div style="float: left;line-height: 100px;padding-right: 20px">
            <el-checkbox @change="handleCheck" v-model="selectList[index].checked"></el-checkbox>
          </div>
          <img class="item-film-img" alt="" :src="item.film.cover"/>
          <div style="float: left;">
            <div class="item-film-name">《{{ item.film.name }}》</div>
            <div class="item-film-seat">座位 : {{ item.cart.seats }}</div>
            <div class="item-film-seat">手机号码 : {{ item.cart.phone }}</div>
            <div class="item-film-time">开场时间 :
              <span style="color: red">{{ item.arrangement.date }} - {{ item.arrangement.startTime }}</span>
            </div>
          </div>
          <div style="float: right;color: #f34d41;letter-spacing: 2px; line-height: 100px;padding-right: 5px">
            ￥{{ item.cart.price }}
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleDelete(index)"
              title=" 确定要删除该购物车订单吗？ "
            >
              <el-button slot="reference"
                         type="text"
                         style="color: red;padding-left: 50px"
                         icon="el-icon-delete">删除
              </el-button>
            </el-popconfirm>
          </div>
        </div>
      </el-card>

      <div v-if="cartList.length !==0" style="height: 60px;background: #C0C4CC">
        <div>
          <div style="float: left;line-height: 60px;padding: 0 20px;font-size: 14px">
            <el-checkbox @change="handleCheckAll" v-model="checkAll">全 选</el-checkbox>
          </div>
          <el-button @click="submitCart" type="text" class="sub-btn">全部结算</el-button>
          <div class="order-footer1">合计 : ￥{{ price }}</div>
        </div>
      </div>

    </div>

    <el-dialog
      title="扫码支付"
      :show-close="false"
      width="30%"
      :visible.sync="centerDialogVisible"
    >
      <div>
        <img class="c-img" src="../../assets/img/pay.png" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitPay">支 付 成 功</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import {DeleteCartById, ListCarts} from "@/api/cart"
  import {CreateOrder} from "@/api/order";

  export default {
    inject:['reload'],
    data() {
      return {
        i: 0,
        success: false,
        centerDialogVisible: false,
        loading: false,
        price: 0,
        selectList: [],
        checkAll: false,
        cartList: [],
        uid: localStorage.getItem("uid"),
        items: [],
      }
    },

    mounted() {
      this.loadCarts()
    },

    methods: {

      loadCarts() {
        this.loading = true;
        ListCarts(this.uid).then(res => {
          setTimeout(() => {
            this.cartList = res.data
            for (let i = 0; i < this.cartList.length; i++) {
              this.selectList[i] = {checked: false, cart: this.cartList[i].cart}
            }
            this.loading = false
          }, 100)
        })
      },

      handleCheck() {
        this.checkOut()
      },

      handleCheckAll() {
        if (this.checkAll) {
          this.changeAllChecked(true)
          this.checkOut()
        } else {
          this.changeAllChecked(false)
          this.price = 0
        }
      },

      changeAllChecked(status) {
        for (let i = 0; i < this.selectList.length; i++) {
          this.selectList[i].checked = status
        }
      },

      checkOut() {
        this.price = 0
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].checked) {
            this.price += this.selectList[i].cart.price
          }
        }
      },

      handleDelete(index) {
        DeleteCartById(this.cartList[index].cart.id).then(res => {
          if (res.success) {
            this.cartList.splice(index, 1)
          }
        })
      },

      submitCart() {
        this.$confirm('请您仔细确认订单金额为' + this.price + '元, 是否继续?', '提示', {
          confirmButtonText: '确认支付',
          cancelButtonText: '取消支付',
          type: 'success',
          center: true
        }).then(() => {
          for (let i = 0; i < this.selectList.length; i++) {
            console.log(this.selectList)
            if (this.selectList[i].checked) {
              this.selectList[i].cart.status = 2
              this.centerDialogVisible = true
              this.items.push(i)
            }
          }
        }).catch(() => {
          for (let i = 0; i < this.selectList.length; i++) {
            if (this.selectList[i].checked) {
              this.selectList[i].cart.status = 0
              CreateOrder(this.selectList[i].cart).then(res => {
                if (res.success) {
                  DeleteCartById(this.selectList[i].cart.id)
                  this.$message({
                    type: 'warning',
                    message: '用户已取消支付, 请您前往 我的订单 并在15分钟内进行支付！'
                  });
                  this.loadCarts()
                }
              })
            }
          }
        });
      },

      submitPay() {
        for (let i = 0; i < this.items.length; i++) {
        CreateOrder(this.selectList[this.items[i]].cart).then(res => {
          if (res.success) {
            this.centerDialogVisible = false
            DeleteCartById(this.selectList[this.items[i]].cart.id).then(res => {
              if (res.success){
                this.$message({
                  type: 'success',
                  message: '恭喜你支付成功!'
                });
                this.loadCarts();
              }
            })
          }
        });
        }
      },


    },

  }
</script>

<style scoped>

  .box-card {
    margin-bottom: 5px;
  }

  >>> .el-card__header {
    background: #C0C4CC;
  }

  .item-film-img {
    float: left;
    width: 80px;
    height: 100px;
    padding-bottom: 20px;
    padding-right: 10px;
  }

  .item-film-name {
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 18px;
    padding-bottom: 13px;
  }

  .item-film-seat {
    letter-spacing: 1px;
    font-size: 12px;
    padding-bottom: 8px;
    padding-left: 10px;
    color: #91949c;
  }


  .item-film-time {
    font-size: 12px;
    padding-left: 10px;
    letter-spacing: 1px;
    color: #91949c;
  }

  .c-img {
    width: 100%;
    height: 100%;
  }

  .sub-btn {
    float: right;
    color: #000000;
    height: 60px;
    width: 120px;
    background: #62c66b;
    letter-spacing: 2px;
    line-height: 33px;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
  }

  .order-footer1 {
    float: right;
    line-height: 60px;
    padding-right: 40px;
  }

  a {
    color: #333333;
  }

  .di {
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    font-weight: bold;
    padding-top: 10px;
  }
</style>
